import React from 'react';
import {Checkbox, Radio, Button} from 'antd';
const RadioGroup = Radio.Group;
import {WeaSearchGroup, WeaFormItem, WeaInput, WeaSelect, WeaCheckbox} from 'ecCom';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import EType from './base/EType';
import ETitle from './base/ETitle';
// import Content_picture_detail from './Content_picture_detail';
import Content_picture_detail from './Content_picture_detail_new';

// 图片元素
export default class Content_picture extends React.Component {
    state = {
        ePopupSetting: this.props.ePopupSetting,
        eDisplayMode: this.props.eDisplayMode,
        eImageWidth: this.props.eImageWidth,
        eImageHeight: this.props.eImageHeight,
        eScrollAuto: this.props.eScrollAuto,
        eScrollSpeed: this.props.eScrollSpeed,
        eScrollPoint: this.props.eScrollPoint,
        eInfoWordNum: this.props.eInfoWordNum,
        eImageSource: this.props.eImageSource,
        eIsAutoHiehgt: this.props.isAutoHiehgt || '0',
        eImageWidthUnit: this.props.imageWidthUnit || 'px',
        eImageHeightUnit: this.props.imageHeightUnit || 'px',
        eRollingDirection: this.props.rollingDirection || '1',
        showTitle: this.props.showTitle || '1',
        fontSize: this.props.fontSize || '16',
        detailModalVisible: false
    };

    render() {
        const {ePopupSetting, eDisplayMode, eImageWidth, eImageHeight, eScrollAuto, eScrollSpeed, eScrollPoint,
            eInfoWordNum, eImageSource, detailModalVisible, eRollingDirection, eImageWidthUnit,
            eImageHeightUnit, showTitle, fontSize } = this.state;
        let { eIsAutoHiehgt } = this.state;
        if (eRollingDirection == '2') {
            eIsAutoHiehgt = '0';
        }
        const options = [
            {
                key: "px",
                selected: true,
                showname: "px"
            },{
                key: "%",
                showname: "%",
            }]
        let EPopupSetting = <div></div>;
        let EDisplayMode = <div></div>;
        let EImageSize = <div></div>;
        let EPictureFrom = <div></div>;
        let ERollingDirection = <div></div>;
        let EScrollSpeed = <div></div>;
        if (this.props.eShareLevel == '2') {
            EPopupSetting = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@bi2qqm`} label={getLabel(24051, '弹出设置')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@bwuz18`} size="default" checked={ePopupSetting} onChange={e => this.setState({ePopupSetting: e.target.checked})}>{getLabel(24052,"弹出图片")}</Checkbox>
                </WeaFormItem>
            );

            EDisplayMode = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@xmcos9`} label={getLabel(21653, '显示方式')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <RadioGroup ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@yna62k`} value={eDisplayMode} onChange={e => this.setState({eDisplayMode: e.target.value})}>
                        <Radio ecId={`${this && this.props && this.props.ecId || ''}_Radio@4dwgxu`} value="1">{getLabel(22920, '单张显示')}</Radio>
                        <Radio ecId={`${this && this.props && this.props.ecId || ''}_Radio@nvmug2`} value="2">{getLabel(22921, '多张显示')}</Radio>
                    </RadioGroup>
                    {
                        this.state.eDisplayMode == '2' && <div style={{display: 'inline-block',bottom: '3px'}}>
                            <span>{getLabel(521339, '布局')}</span>
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@zo19n4`}
                                value={eRollingDirection}
                                options={[
                                    {
                                        key: "1",
                                        selected: true,
                                        showname: `${getLabel(521340, '横向')}`,
                                    },{
                                        key: "2",
                                        showname: `${getLabel(521341, '纵向')}`,
                                    }]}
                                style={{width: '80px', marginLeft: '10px'}}
                                onChange={value => this.setState({eRollingDirection: value})}/>
                        </div>
                    }
                </WeaFormItem>
            );

            EImageSize = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@pl6r92`} label={getLabel(386564, '图片大小')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <span>{getLabel(386529, '宽度：')}</span>
                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@bv3nmy`} value={eImageWidth} style={{width: '40px', marginRight: '10px'}} onChange={value => this.setState({eImageWidth: value})}/>
                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@fzt4un`} value={eImageWidthUnit} options={options} style={{width: '70px', marginRight: '10px'}} onChange={value => this.setState({eImageWidthUnit: value})}></WeaSelect>
                    {
                        eIsAutoHiehgt != '1' && <div style={{display: 'inline-block'}}>
                            <span>{getLabel(386530, '高度：')}</span>
                            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@arh6mh`} value={eImageHeight} style={{width: '40px'}} onChange={value => this.setState({eImageHeight: value})}/>
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@l6w1vy`} value={eImageHeightUnit} options={options} style={{width: '70px', marginLeft: '10px'}} onChange={value => this.setState({eImageHeightUnit: value})}></WeaSelect>
                        </div>
                    }
                    {eRollingDirection == '1' && <div style={{display: 'inline-block', position: 'relative', display: 'inline-block', left: '22px'}}>
                        <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@klep69`} size="default" checked={eIsAutoHiehgt==1} onChange={e => {
                            this.setState({eIsAutoHiehgt: e.target.checked ? 1 : 0})
                        }}>{getLabel(521342, '自适应高度')}</Checkbox>
                    </div>}
                </WeaFormItem>
            );

            let modal2Detail = <div></div>;
            if (detailModalVisible) {
                const detailProps = {
                    datas: eImageSource,
                    showTitle: showTitle,
                    fontSize: fontSize,
                    onOk: (datas, showTitle, fontSize) => {
                        this.setState({
                            eImageSource: datas,
                            detailModalVisible: false,
                            showTitle: showTitle,
                            fontSize: fontSize,
                        });
                    },
                    onCancel: () => {
                        this.setState({
                            detailModalVisible: false
                        });
                    }
                };
                modal2Detail = <Content_picture_detail ecId={`${this && this.props && this.props.ecId || ''}_Content_picture_detail@gdcnrf`} {...detailProps}/>
            }

            EPictureFrom = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@r7ek1o`} label={getLabel(22930, '图片来源')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <div style={{marginTop: '10px'}}><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@x6d1ep`} type="primary" size="small" onClick={() => this.setState({detailModalVisible: true})}>{getLabel(22923, '图片设置')}</Button></div>
                    {modal2Detail}
                </WeaFormItem>
            );


            EScrollSpeed= (
                 <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@hnxqyh`} label={getLabel(22927, '滚动速度')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@uve642`} value={eScrollSpeed} style={{width: '80px'}} onChange={value => this.setState({eScrollSpeed: value})}/><span style={{top:' -4px', position: 'relative'}}>ms</span>
                     <div style={{display: 'inline-block', position: 'relative', display: 'inline-block', left: '22px'}}>
                         <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@0kym5t`} size="default" checked={eScrollAuto} onChange={e => {
                             this.setState({eScrollAuto: e.target.checked})
                         }}>{getLabel(24548, '自动滚动')}</Checkbox>
                     </div>
                     <div style={{display: 'inline-block', position: 'relative', display: 'inline-block', left: '22px'}}>
                         <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@n915m8`} size="default" checked={eScrollPoint} onChange={e => this.setState({eScrollPoint: e.target.checked})}>{getLabel(22928, '滚动指向')}</Checkbox>
                     </div>
                 </WeaFormItem>
             );
            // ERollingDirection= (
            //     <WeaFormItem label={'滚动方向'} labelCol={{span: 6}} wrapperCol={{span: 16}}>
            //         <WeaSelect value={eRollingDirectionDetial} options={
            //             eRollingDirection == '2' ?[{
            //                 key: "0",
            //                 selected: true,
            //                 showname: '无'
            //             },{
            //                 key: "3",
            //                 showname: '向上'
            //             },{
            //                 key: "4",
            //                 showname: '向下',
            //             }]:[{
            //                 key: "0",
            //                 selected: true,
            //                 showname: '无'
            //             },{
            //                 key: "1",
            //                 showname: '向左'
            //             },{
            //                 key: "2",
            //                 showname: '向右',
            //             }]
            //         } style={{width: '80px', marginRight: '10px'}} onChange={value => this.setState({eRollingDirectionDetial: value})}></WeaSelect>
            //         <Checkbox size="default" checked={eScrollPoint} onChange={e => this.setState({eScrollPoint: e.target.checked})}>{getLabel(22928, '滚动指向')}</Checkbox>
            //     </WeaFormItem>
            // );
        }

        return (
            <div>
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@rjfgmm`} title={getLabel(81711, '基本信息')} needTigger={true} showGroup={true}>
                    <EType ecId={`${this && this.props && this.props.ecId || ''}_EType@18pwe2`} ref="eType" value={this.props.eBaseName}/>
                    {this.props.eShareLevel == '2' ? <ETitle ecId={`${this && this.props && this.props.ecId || ''}_ETitle@vyif7j`} ref="eTitle" eid={this.props.eid} value={this.props.eTitle} {...this.props}/> : ''}
                    {EPopupSetting}
                    {EDisplayMode}
                    {EImageSize}
                    {/*{ERollingDirection}*/}
                    {eDisplayMode== '2' && EScrollSpeed}
                    {EPictureFrom}
                </WeaSearchGroup>
            </div>
        );
    }

    getSaveValues() {
        return {
            eContentTitle: this.refs['eTitle'] ? this.refs['eTitle'].getSaveValues() : this.props.eTitle,
            eContentPopupSetting: this.state.ePopupSetting,
            eContentDisplayMode: this.state.eDisplayMode,
            eContentImageWidth: this.state.eImageWidth,
            eContentImageHeight: this.state.eImageHeight,
            eContentScrollAuto: this.state.eScrollAuto,
            eContentScrollSpeed: this.state.eScrollSpeed,
            eContentScrollPoint: this.state.eScrollPoint,
            eContentInfoWordNum: this.state.eInfoWordNum,
            eContentImageSource: this.state.eImageSource,
            eRollingDirection: this.state.eRollingDirection,
            eIsAutoHiehgt: this.state.eIsAutoHiehgt,
            eImageWidthUnit: this.state.eImageWidthUnit,
            eImageHeightUnit: this.state.eImageHeightUnit,
            eContentShowTitle: this.state.showTitle,
            eContentFontSize: this.state.fontSize,
        };
    }
}
